<template>
    <div class="home-root">
        <div v-if="books">
            <div class="swiper">
                <Swiper></Swiper>
            </div>
            <div class="groom">
                <h1 class="flag flag-title">
                    <div>热门推荐</div>
                    <div class="flag-right">more <img src="/img/arrow.png" alt=""></div>
                </h1>
                <div class="recommend">
                    <BookListFirst v-for="s,i in books" :key="i" :books="s"></BookListFirst>
                </div>
            </div>
            <div class="The-divider">

            </div>
            <div class="competitive">
                <h1 class="flag flag-title">
                    <div>出版精品</div>
                    <div class="flag-right">more <img src="/img/arrow.png" alt=""></div>
                </h1>
                <div class="cream-box">
                    <BookListSecond class="cream" v-for="s,i in books" :key="i" :books="s">
                        <template slot="line1">
                            <p class="description">{{s.intro | strFunction}}</p>
                        </template>
                    </BookListSecond>
                </div>
            </div>
            <div class="like">
                <h1 class="flag flag-title">
                    <div>猜你喜欢</div>
                    <div class="flag-right">换一换</div>
                </h1>
                <div class="recommend">
                    <BookListFirst v-for="s,i in books" :books="s" :key="i"></BookListFirst>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";
import BookListFirst from "../components/BookListFirst.vue";
import BookListSecond from "../components/BookListSecond.vue";
import Swiper from "../components/Swiper.vue";
export default{
    computed:{
        ...mapState(["books"]),
    },
    components:{
        BookListFirst,
        BookListSecond,
        Swiper
    },
    mounted(){
        this.$store.dispatch("getBooks");
    }
}
</script>

<style scoped lang="less">
    .home-root{
        
    }
    .swiper{
        margin: @s41 @s29 0;
        height: @s342;
    }
    .groom,.competitive,.like{
        padding: 0 3.9vw;
        margin-top: 9.3vw;
    }
    .The-divider{
        width: 100vw;
        height: 4vw;
        background-color: #e3e3e3;
    }
    .recommend{
        width: 82.1vw;
        margin: 5.3vw auto;
        display: flex;
        justify-content: space-between;
    }
    h1{
        font-size: @title;
    }
    h1 span{
        position: relative;
        bottom: 0.8vw;
    }
    h1 div{
        margin-left: 1.6vw;
        display: inline-block;
    }

    .flag-right img{
        position: relative;
        top: 0.8vw;
        height: 3.5vw;
        opacity: 0.7;
    }
    .flag-title{
        display: flex;
        justify-content: space-between !important;
        width: 100%;
        padding-right: 3vw;
        .flag-right{
            color: #b1b1b1;
            font-size: 3.5vw;
            font-weight: normal;
        }
    }
    .cream{
        margin: 4.4vw 0;
    }
    .cream-box{
        margin-top: 0.9vw;
    }
</style>